<template>
	<view>
		<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
		<swiper previous-margin="140rpx" next-margin="140rpx"
			@change="handlechange"
			:current="mycurrent"
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="3000" 
			:duration="1000">
			<swiper-item v-for="src,index in swiperData" :key="index">
				<view :class="['swiper-item', index==mycurrent ? 'active' : '']">
					<img class="swiper-img" :src="src" alt="">
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "index-swiper",
		data() {
			return {
				mycurrent: 0,
				swiperData: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.quanjing.com%2Fvv%2Fac%2FQJ6900910905.jpg&refer=http%3A%2F%2Fpic.quanjing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671276022&t=9103b8e38e0012222f4cf1bf30aa58a6',
					'https://img0.baidu.com/it/u=146267666,3284174069&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091305%2Fu35w052dxlau35w052dxla.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671276022&t=b2c7bd033ceee38e83f2ac5ef9f5896f',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bizhiku.net%2Fuploads%2F2020%2F0914%2Fanm1cvu1npy.jpg%3Fx-oss-process%3Dstyle%2Fw_870-h_870&refer=http%3A%2F%2Fimg.bizhiku.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671276022&t=ce5fb2ac73f381a5d36ec7d0dd90b8d9',
					'https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/359b033b5bb5c9ea7f5ed3c7dd39b6003af3b361.jpg',
				]
			}
		},
		methods: {
			handlechange(e){
				this.mycurrent = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
.swiper{
	height: 600rpx;
	border: 1px solid blueviolet;
}
.swiper-item{
	border-radius: 30rpx;
	overflow: hidden;
	// 像这种多张轮播图同时出现在一屏的情况下就不要指定width
	// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
	// width: 450rpx;
	height: 85%;
	transform: scale(0.8);
	transition: all 0.5s ease;
	text-align: center;
	transition: all 0.5s ease-in-out;
	&.active{
		transform: scale(1);
	}
}
.swiper-img{
	width: 100%;
	height: 100%;
}
</style>
